<template>
    <div class="table-com-list" >
        <div class="tab-head">
            <ul>
                <li :style="newObj.header.length==2?'width:50%;':(newObj.header.length==3?'width:33%;':'width:25%;')" v-for="(list,index) in newObj.header" :key="index"><div class="cell">{{list}}</div></li>
            </ul>
        </div>
        <div class="tab-body" :style="{'height':height}" ref="tabbody">
            <ul v-for="(list,index) in newObj.data" :key="index">
                <li :style="list.length==2?'width:50%;':(list.length==3?'width:33%;':'width:25%;')" v-for="(listd,index) in list" :key="index"><div class="cell" v-html="listd"></div></li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'titleslotcontent',
    /* 外部引入的值 */
    props: {
       
        config:{
             type: Object,
            default: []
        },
        width:{
            type: String,
            default: '500px'
        },
        height:{
            type: String,
            default: '115px'
        },
    },
    watch: {
        config(curVal, oldVal) {
            // console.log(curVal,'curValcurVal');
            this.$refs.tabbody.scrollTop=0;
        if (curVal) {
            
            this.newObj = curVal;
         
        }}
    },
    data() {
        return {
            newObj:{}
        }
    },
    mounted() {
      
    },
    methods: {

    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.table-com-list{
   
    
   ul{
       display: flex;
       justify-content: space-between;
       li{
           padding: 0 15px;
           min-width: 25%;
           box-sizing: border-box;
           flex-shrink: 0;
           &:nth-child(1){
               .cell{padding-left: 15px;}
           }
       }
   }
  
    .tab-head{
       
        left: 0;
        top: 0;
        width: 100%;
        color: #FFF;
       background-color: rgb(13, 48, 93); 
       text-align: left;
       box-sizing: border-box;
       padding-right: 7px;
    }
    .tab-body{
         overflow-y: auto;
                /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
            &::-webkit-scrollbar{
                width: 7px;
                height: 7px;
                background-color:#121722;
            }

            /*定义滚动条轨道 内阴影+圆角*/
            &::-webkit-scrollbar-track {
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                border-radius: 10px;
                background-color:#121722;
            }

            /*定义滑块 内阴影+圆角*/
            &::-webkit-scrollbar-thumb{
                border-radius: 10px;
                box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
                background-color:rgb(16, 107, 165);
            }
       li{
            border-bottom: 1px solid rgba(31, 47, 76, 0.48);
            color: #B2D4FE;   
       }
    }
    .cell{
        display: inline-block;
        white-space: nowrap; 
        width: 100%; 
        overflow: hidden;
        text-overflow:ellipsis;
        line-height: 36px;
        position: relative;
        
    }
}
</style>
